<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ZXing tester</title>
        <style type="text/css">
            body {background:#000000;margin:0;color:#fff;font-family:sans-serif;}
            #lnkScan{font-size:1.5em;margin:1em .5em;text-align:center;background:#231F20;border: 1px solid #09c;text-decoration:none;padding:.5em;display:block;color:#33B5E5;}
            #btnOptions {background:#09c;border: 1px solid #33B5E5;color:#231F20;position:fixed;bottom:0;right:0;padding:.5em;}
            #lblResults {color:#09c;word-wrap:break-word;}
            #cblScanFormats,#rblScanFormatsFormat{list-style:none;margin:0 0 1em;padding:0;}
            #txtBaseURL{font-size:.8em;display:block;width:100%;margin:0;border:none;}
            #panOptions{margin:1em 0;padding:1em;background:#231F20;display:none;border:1px solid #09c; border-right:none;border-left:none;word-wrap:break-word;}
            p{padding:0;margin:0 0 1em;}
            a{color:#09c;}
        </style>
        <script type="text/javascript">

        var tgd = {

            SCAN_FORMATS_FORMAT : { COMMA : 1, INDIVIDIUAL : 2 },
            ZXING_URL : "http://zxing.appspot.com/scan",

            init : function () {
                this.GUI = {};
                this.GUI.lnkScan = document.getElementById("lnkScan");
                this.GUI.panResults = document.getElementById("panResults");
                this.GUI.lblResults = document.getElementById("lblResults");
                this.GUI.txtBaseURL = document.getElementById("txtBaseURL");
                this.GUI.lblComputedURL = document.getElementById("lblComputedURL");
                this.GUI.txtBaseURL = document.getElementById("txtBaseURL");
                this.GUI.panOptions = document.getElementById('panOptions');
                this.GUI.rbComma = document.getElementById('rbComma');
                this.GUI.rbIndividual = document.getElementById('rbIndividual');
                this.GUI.ScanFormats = document.getElementById("cblScanFormats").getElementsByTagName("input");

                this.GUI.txtBaseURL.value = location.protocol + "//" + location.host + location.pathname + "?code={CODE}";

                this.GUI.lblComputedURL.textContent = this.ZXING_URL + "?ret=" + this.GUI.txtBaseURL.value

                if (window.location.search != "") {
                    var upc = window.location.search.substr(6);  //?code=##########
                    this.GUI.lblResults.textContent = upc;
                } else {
                	this.GUI.panResults.style.display = "none";
                }
            },

            toggleScanOptions : function() {
                tgd.GUI.panOptions.style.display = (tgd.GUI.panOptions.style.display !== 'block' ? 'block' : '');
            },

            writeURL : function() {
                var formats = [];
                
                for (var i = 0; i < tgd.GUI.ScanFormats.length; ++i) {
                    if (tgd.GUI.ScanFormats[i].checked) {
                        formats.push(tgd.GUI.ScanFormats[i].value)
                    }
                }

                tgd.GUI.lnkScan.href = tgd.GUI.lblComputedURL.textContent = this.ZXING_URL + "?ret=" + this.GUI.txtBaseURL.value + (formats.length === 0 ? "" : "&SCAN_FORMATS=" + formats.join(tgd.GUI.rbComma.checked ? "," : "&SCAN_FORMATS="));
            }
        }

        </script>
    </head>
    <body id="body" onload="tgd.init();">
        <a id="lnkScan" href="http://zxing.appspot.com/scan?ret=http://dl.dropbox.com/u/8941568/oojs/zxing.htm?code={CODE}">Scan</a>
        <div id="panResults">
            Scan Results:
            <div>
                <span id="lblResults"></span>
            </div>
        </div>
        <input id="btnOptions" type="button" value="Scan Options" onclick="tgd.toggleScanOptions();" />
        <div id="panOptions">
            <p>
                Use this page to test out the <a href="http://code.google.com/p/zxing/issues/detail?id=370">website intent</a> functionality provided by the <a href="http://code.google.com/p/zxing/">ZXing barcode</a> scanner on Android.
                By default the "Scan" link will not restrict which types of barcodes can be scanned.
                Use the options below to narrow scanning formats used or to change the format of the URL that is sent to the ZXing scanner.
                All options are reset after each page load.
                No encoding/decoding is done while creating or reading URLs.
                This is for testing purposes only.
                If you would like any features added or any corrections made, please let me know.
            </p>
            <p>
                <label for="txtBaseURL">Base URL</label><input id ="txtBaseURL" type="text" onchange="tgd.writeURL();" />
            </p>
            <!-- http://code.google.com/p/zxing/source/browse/trunk/core/src/com/google/zxing/BarcodeFormat.java -->
            Scan Formats
            <ul id="cblScanFormats">
                <li><input onchange="tgd.writeURL();" id ="cbQRCODE" type="checkbox" value="QR_CODE" /> <label for="cbQRCODE">QR Code</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbDATAMATRIX" type="checkbox" value="DATA_MATRIX" /> <label for="cbDATAMATRIX">DataMatrix</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbUPCE" type="checkbox" value="UPC_E" /> <label for="cbUPCE">UPC-E</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbUPCA" type="checkbox" value="UPC_A" /> <label for="cbUPCA">UPC-A</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbEAN8" type="checkbox" value="EAN_8" /> <label for="cbEAN8">EAN-8</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbEAN13" type="checkbox" value="EAN_13" /> <label for="cbEAN13">EAN-13</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbCODE128" type="checkbox" value="CODE_128" /> <label for="cbCODE128">Code 128</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbCODE39" type="checkbox" value="CODE_39" /> <label for="cbCODE39">Code 39</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbCODE93" type="checkbox" value="CODE_93" /> <label for="cbCODE93">Code 93</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbCODABAR" type="checkbox" value="CODABAR" /> <label for="cbCODABAR">CODABAR</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbITF" type="checkbox" value="ITF" /> <label for="cbITF">ITF</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbRSS14" type="checkbox" value="RSS14" /> <label for="cbRSS14">RSS 14</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbPDF417" type="checkbox" value="PDF417" /> <label for="cbPDF417">PDF417</label></li>
                <li><input onchange="tgd.writeURL();" id ="cbRSSEXPANDED" type="checkbox" value="RSS_EXPANDED" /> <label for="cbRSSEXPANDED">RSS Expanded</label></li>
            </ul>

            Scan Formats URL format
            <ul id="rblScanFormatsFormat">
                <li><input onchange="tgd.writeURL();" name="rbFormat" id ="rbComma" type="radio" value="comma" checked="checked" /> <label for="rbComma">Comma e.g. &SCAN_FORMATS=UPC_A,EAN_13</label></li>
                <li><input onchange="tgd.writeURL();" name="rbFormat" id ="rbIndividual" type="radio" value="individual" /> <label for="rbIndividual">Separate e.g. &SCAN_FORMATS=UPC_A&SCAN_FORMATS=EAN_13</label></li>
            </ul>

            <div>
                Output URL
                <div>
                    <span id="lblComputedURL"></span>
                </div>
            </div>
        </div>
    </body>
</html>
